<template>
	<div class="page-header-rd">
		<a href="javascript:;" class="page-header-back"></a>
		<span class="page-header-title">{{title}}</span>
		<slot></slot>
	</div>
</template>

<style lang="scss" scoped="">
	.page-header-rd{
		padding: 0 a(24px);
		background-color: #000;
		height: a(96px);
		line-height: a(96px);
		
		.page-header-back{
			display: inline-block;
			position: relative;
			float: left;
			width: a(32px);
			height: a(32px);
			margin-top: a(32px);

			&::after{
				content: '';
				position: absolute;
				top:0;
				left:0;
				display: inline-block;
				width: a(32px);
				height: a(32px);
				background: url("~__assets/images/icon/back.png") no-repeat;
				background-size: 100% 100%;
			}
		}
		.page-header-title{
			display: inline-block;
			float:left;
			margin-left: 10px;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
			width: a(400px);
			color: #fff;
		}
	}
</style>

<script>
	export default{
		name: 'page-header',
		props: ["title"]
	}
</script>